<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

</head>
<body>

<div id="app">
    <p>{{msg}}</p>
    <!--  第一个是值，后面的都是过滤器名字，过滤器支持传参  -->
    <p>{{msg|msgFilter|test}}</p>
</div>

<div id="app2">
    <p>{{msg2}}</p>
    <p>{{msg2|msgFilter|testFilter}}</p>
</div>

<script>
    //全局过滤器，所有vue都可以用
    Vue.filter("msgFilter",function(msg){
        return msg.replace(/NBA/g,"美国篮球联盟");
    });

    Vue.filter("test",function (msg) {
        return msg+"****";
    })

    var vue = new Vue({
        el:"#app",
        data:{
            msg:"今日NBA,保罗换威少,哈哈...NBA新闻真多，大家一起关注NBA..."
        },
        methods:{

        }
    })

    var vue2 = new Vue({
        el:"#app2",
        data:{
            msg2:"今日NBA,保罗换威少,哈哈...NBA新闻真多，大家一起关注NBA..."
        },
        methods:{

        },
        //局部过滤器
        filters:{
            testFilter:function(msg){
                return msg+"--局部过滤器";
            }
        }
    })

</script>

</body>
</html>